Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges). Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node. Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"edges" : [{"id1" : "Id1","id2" : "Id2","thickness" : 3},{"id1" : "Id2","id2" : "Id3","thickness" : 3},{"id1" : "Id3","id2" : "Id4","thickness" : 3},{"id1" : "Id0","id2" : "Id1","thickness" : 3},{"id1" : "Id2","id2" : "Id0","thickness" : 3},{"id1" : "Id3","id2" : "Id5","thickness" : 3},{"id1" : "Id0","id2" : "Id5","thickness" : 3}],
"groups" : [{"color" : "rgb(94, 159, 202)","groupIds" : ["G1"],
"id" : "G0",
"nodes" : ["Id0"],
"padding" : 0.01
},
{
"color" : "rgba(245, 245, 245, 0.5)",
"id" : "G1",
"nodes" : ["Id1","Id2"],
"padding" : 0.01
},
{
"color" : "rgb(255, 187, 120)",
"id" : "G2",
"nodes" : ["Id3","Id4"],
"padding" : 0.01
}
],
"nodes" : [{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id0","name" : "a","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id1","name" : "b","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id2","name" : "c","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id3","name" : "d","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id4","name" : "e","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id5","name" : "f","shape" : "roundrect","width" : 30},{"color" : "rgb(255, 187, 120)","height" : 20,"id" : "Id6","name" : "g","shape" : "roundrect","width" : 30}]
}
<-- Create the configuration for the graph -->
var config = {
"edgeColor":"rgb(122,78,79)",
"edgeThickness":"3",
"graphType":"Network",
"networkColaAllConstraintsIterations":"50",
"networkColaAvoidOverlaps":"true",
"networkColaGridSnapIterations":"50",
"networkColaLinkDistance":"80",
"networkColaStartUnconstrainedIterations":"100",
"networkColaUserConstraintIterations":"0",
"networkLayoutType":"cola"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
nodes=read.table("https://www.canvasxpress.org/data/cX-hierGroup-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/cX-hierGroup-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
groups=read.table("https://www.canvasxpress.org/data/cX-hierGroup-groups.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
nodeData=nodes,
edgeData=edges,
groupData=groups,
edgeColor="rgb(122,78,79)",
edgeThickness=3,
graphType="Network",
networkColaAllConstraintsIterations=50,
networkColaAvoidOverlaps=TRUE,
networkColaGridSnapIterations=50,
networkColaLinkDistance=80,
networkColaStartUnconstrainedIterations=100,
networkColaUserConstraintIterations=0,
networkLayoutType="cola"
)
Create New Page